<template>
  <div>
    <div class="score-quantity-content">
      <div>
        <h3>{{goodslist.name}}</h3>
        <div class="score-quantity">
          <van-rate
          v-model="goodslist.score"
          :size="20"
          color="#ffd21e"
          void-icon="star"
          void-color="#eee"
          />
          <p class="quantity"><span style="margin-right:10px;">(661)</span>月售{{goodslist.sellCount}}单</p>
        </div>
      </div>
      <div style="text-align:center;">
        <van-icon name="like" :size="22" color="#FF3300"/>
        <p style="font-size:14px; color:#666; margin-top:5px;">已收藏</p>
      </div>    
    </div>

    <div class="distribution-info">
      <div class="distribution-info-content">
        <p class="text">起送价</p>
        <p class="num"><span style="font-size:24px; font-weight:500;">{{goodslist.minPrice}}</span>元</p>
      </div>
      <div class="distribution-info-content">
        <p class="text">商家配送</p>
        <p class="num"><span style="font-size:24px; font-weight:500;">{{goodslist.deliveryPrice}}</span>元</p>
      </div>
      <div class="distribution-info-content">
        <p class="text">平均配送时间</p>
        <p class="num"><span style="font-size:24px; font-weight:500;">{{goodslist.deliveryTime}}</span>分钟</p>
      </div>  
    </div>

    <div style="margin-top:20px; height:20px; background-color:#eee;"></div>

    <div class="activity-notice">
      <div class="title">活动与公告</div>
      <p class="notice-text">{{goodslist.bulletin}}</p>
      <div style="margin-top:20px;" v-for="(item,index) in goodslist.supports" :key="index">
        <van-tag plain type="danger">减</van-tag>
        <span style="color:#222; margin-left:10px;">{{item}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import {shopseller} from "@/apis/apis"
export default {
  data(){
    return{
      goodslist:"",
    }
  },
  created(){
     shopseller().then(res=>{
      // console.log(res.data.data)
      this.goodslist=res.data.data
    })
  },
  computed:{
    
  },
  methods:{
   
    
  }
}
</script>

<style lang=less scoped>
  *{
    padding:0;
    margin:0;
  }
  .score-quantity-content{
    padding:20px;
    display:flex;
    justify-content: space-between;
    border-bottom:1px solid #eee;
    .score-quantity{
      margin-top:10px;
      display:flex;
      .quantity{
        margin-left:10px;
        color:#777;
        font-size:14px;
      }
    }
  }
  .distribution-info{
    margin-top:20px;
    display:flex;
    justify-content: space-around;
    .distribution-info-content{
      display:flex;
      flex-direction: column;
      text-align: center;
      .text{
        color:#aaa;
        line-height:2em;
      }
      .num{
        font-size:12px;
      }
    }
  }
  .activity-notice{
    margin-top:20px;
    padding:10px;
    .title{
      font-size:22px;
      font-weight: 550;
    }
    .notice-text{
        margin-top:15px;
        padding-bottom:20px;
        color:#FF4010;
        font-weight: 600;
        line-height:1.5em;
        border-bottom:1px solid #eee;
      }
  }
</style>